<!-- 运费管理 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="top">
      <el-button
        type="warning"
        @click="openDialog"
      >新增模版</el-button>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          prop="templateType"
          label="模版类型"
          :formatter="formatTemplate"
        >
        </el-table-column>
        <el-table-column
          prop="transportType"
          label="运送类型"
          :formatter="formatTransport"
        >
        </el-table-column>
        <el-table-column
          prop="associatedCityList"
          label="关联城市"
        >
        </el-table-column>
        <el-table-column
          prop="firstWeight"
          label="首重"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="continuousWeight"
          label="续重"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="lightThrowingCoefficient"
          label="轻抛系数"
          width="180"
        >
        </el-table-column>
        <el-table-column
          text-align-center
          label="操作"
          width="180"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              class="edit"
              @click="editInfo(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              class="del"
              @click="delDialog(scope.row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <freightAdd
      ref="dialog"
      :item-data="itemData"
      @getList="getListData"
    ></freightAdd>
    <!-- 删除弹出框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span style="margin-left: 30px;">确认要删除此条数据吗</span>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="warning"
          @click="delItem"
        >确 定</el-button>
      </span>
    </el-dialog></div>
</template>

<script>
import { freightManageList, freightManageDelete } from '@/api/transit'
import freightAdd from './components/freight-add.vue'
export default {
  components: {
    freightAdd
  },
  data() {
    return {
      tableData: [], // 列表数据
      itemData: {}, // 单条详细数据
      dialogVisible: false, // 弹框开关
      id: null
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    // 获取列表数据
    async getListData() {
      const res = await freightManageList()
      this.tableData = res.data
    },
    // 处理模板类型显示
    formatTemplate(row) {
      const MAP = {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省'
      }
      return MAP[row.templateType]
    },
    // 处理运送类型显示
    formatTransport(row) {
      const MAP = {
        1: '普快',
        2: '特快'
      }
      return MAP[row.transportType]
    },
    // 打开弹框
    openDialog() {
      this.$refs.dialog.dialogFormVisible = true
    },
    // 编辑
    editInfo(row) {
      this.$refs.dialog.dataForm = row
      this.$refs.dialog.dialogFormVisible = true
    },
    // 删除
    delDialog(id) {
      this.dialogVisible = true
      this.id = id
    },
    async delItem() {
      await freightManageDelete(this.id)
      this.$message.success('删除成功')
      this.id = null
      this.dialogVisible = false
      this.getListData()
    }
  }
}
</script>

<style lang="scss" scoped rel="stylesheet/scss">
.waybill-list {
  padding: 30px;

  .top {
    padding-left: 14px;
    height: 100px;
    line-height: 100px;
    background-color: #fff;
  }

  .edit {
    color: #419EFF;
  }

  .del {
    color: #F56C6C;
  }

  .el-dialog__wrapper {
    ::v-deep .el-dialog__body {
      padding-left: 0px;
    }
  }
}
</style>
